<template>
  <transition>
    <div class="app-product-list">
      <section class="app-main">

        <div class="search-content">
          <mt-field label="" placeholder="可输入商品编码、商品名称查询" v-model="searchValue" @keyup.enter.native="handleSelectCode">
            <span class="iconfont icon-search" @click="handleSelectCode"></span></mt-field>
        </div>
        <mt-cell class="select-car" :title="carModel" is-link @click.native="handleSelectCar">
        </mt-cell>
        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            class="media-list">
          <li class="media-item" v-for="(item,index) in productList" @click="handleActionDetails(item)">
            <!--<span class="media-img"><img :src="item.src"></span>-->
            <span class="media-img"><img :src="noneImg"/></span>
            <dl class="media-content">
              <dd class="media-title">{{item.commAttribName}}</dd>
              <dd class="media-number">{{item.commAttribCode}}</dd>
              <dd class="media-price">
                ￥<span class="price">
                {{item.commattribPrice}}
                </span>
                <span class="item-factory">{{item.factory}}</span>
              </dd>
            </dl>
          </li>
        </ul>
        <div class="product-none" v-if="productList.length<=0">暂无商品<div class="button-xunjia">
          <mt-button type="primary" @click.native="handleYuyue">立即预约询价</mt-button></div></div>
        <ul class="classification-footer-content" :class="['item'+classAttr.length]">
          <li v-for="(item,index) in classAttr" class="item" :class="{active:index==curIndex}" @click="handleSelectClass(item,index)">{{item.text}}</li>
        </ul>
        <div class="line-scale-pulse-out" v-show="loading">
          <div class="loader-item"></div>
          <div class="loader-item"></div>
          <div class="loader-item"></div>
          <div class="loader-item"></div>
          <div class="loader-item"></div>
        </div>
      </section>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,Field,Button,Toast,Checklist,MessageBox,Indicator} from 'mint-ui';
  export default {
    components:{
      Header,
      Cell,
      Field,
    },
    data () {
      return {
        classTitle:'',
        total:'',
        page:1,
        searchValue:'',
        noneImg:'./static/img/img-none.jpg',
        carModel:'',
        productList:[],
        loading:false,
        loadTips:false,
        isLocalCode:false,
        classAttr:[],
        curIndex:-1,
        classId:'',
      }
    },
    beforeDestroy: function() {
      document.body.removeAttribute("class","add_bg");
    },
    mounted(){
      document.getElementsByTagName("body")[0].className="add_bg";
      Indicator.open({
        text: '加载中...',
        spinnerType: 'snake'
      });

      var params = new URLSearchParams();
      params.append('plateFormFlag','0101');
      params.append('bdType', 'bu_classify.classify_id.classify');
      this.$axios({
        method: 'post',
        url:'gp/app/util/ajax!getBdTree.do',
        data:params,
      }).then((res)=>{
        console.log(res)
      this.classAttr=[];
      for(var i=0;i<res.data.length;i++){
        var item={
          text:res.data[i].text,
          id:res.data[i].id
        };
        this.classAttr.push(item)
      }
      });
      this.getData();
    },
    methods:{

      loadMore() {
        if(this.total==0){
          return false;
        }
        if(this.productList.length<this.total){
          this.loading = true;
          this.page++;
          var params = new URLSearchParams();
          params.append('page', this.page);

          params.append('plateFormFlag','0101');
          if(this.classId!=''){
            params.append('form.classifyId', this.classId);
          }

          if(this.isLocalCode==false){
            if(this.$route.query.id!=undefined){

              params.append('form.carModelId', this.$route.query.id);
            }
            if(this.$route.query.searchValue!=undefined){

              params.append('commAttribCode', this.$route.query.searchValue);
            }
          }else{
            params.append('commAttribCode', this.searchValue);
          }
          this.$axios({
            method: 'post',
            url:'gp/app/commattribApp!getCommattribList.do',
            data:params,
          }).then((res)=> {
            for(var i=0;i<res.data.rows.length;i++){
            this.productList.push(res.data.rows[i]);
          }
        });
          setTimeout(() => {
            this.loading = false;
        },1500);
        }else{
          this.loading = false;
          this.loadTips=true;
        }
      },
      getData(){
        if(this.$route.query.carModel!=undefined){
          this.carModel=this.$route.query.carModel;
        }else{
          this.carModel='暂无选择车型'
        }
        var params = new URLSearchParams();
        params.append('page', this.page);
        params.append('plateFormFlag','0101');
          if(this.$route.query.id!=undefined){
            params.append('form.carModelId', this.$route.query.id);
          }
          if(this.$route.query.searchValue!=undefined){

            params.append('commAttribCode', this.$route.query.searchValue);
          }

        this.$axios({
          method: 'post',
          url:'gp/app/commattribApp!getCommattribList.do',
          data:params,
        }).then((res)=>{
          this.productList=res.data.rows;
          this.total=res.data.total
          Indicator.close();
      });
      },
      handleYuyue(){
        var xunjiaName='';
        if(this.searchValue!=''){
          xunjiaName=this.searchValue
        }else{
          xunjiaName=this.carModel
        }
        this.$router.push({path:'/store-inquiry-order-add',query: {name:xunjiaName,class:this.classTitle}})
      },
      handleSelectCode(){
        this.page=1;
        this.curIndex=-1;
        this.classId='',
        this.carModel='暂无选择车型';
        this.isLocalCode=true;
        var params = new URLSearchParams();
        params.append('page', this.page);
        params.append('plateFormFlag','0101');
        params.append('commAttribCode', this.searchValue);
        this.$axios({
          method: 'post',
          url:'gp/app/commattribApp!getCommattribList.do',
          data:params,
        }).then((res)=>{
          this.productList=res.data.rows
        this.total=res.data.total
      });
      },
      handleSelectCar(){
        this.$router.push({path:'/report-center'})
      },
      handleActionDetails(item){
        this.$router.push({path:'/product-details',query: {id:item.commAttribId}})
      },
      handleSelectClass(item,index){
        this.curIndex=index;
        this.page=1;
        this.classTitle=item.text;
        this.classId=item.id;
        var params = new URLSearchParams();
        params.append('page', this.page);
        params.append('plateFormFlag','0101');
        params.append('form.classifyId', item.id);
        if(this.isLocalCode==false){
          if(this.$route.query.id!=undefined){

            params.append('form.carModelId', this.$route.query.id);
          }
          if(this.$route.query.searchValue!=undefined){

            params.append('commAttribCode', this.$route.query.searchValue);
          }
        }else{
          params.append('commAttribCode', this.searchValue);
        }
        this.$axios({
          method: 'post',
          url:'gp/app/commattribApp!getCommattribList.do',
          data:params,
        }).then((res)=>{
          this.productList=res.data.rows
        this.total=res.data.total
      });

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-product-list .app-main{
    padding:0 0 54px;
  }
  .app-product-list .search-content{
    overflow: auto;
    padding:12px 16px;
    text-align: center;
    z-index: 100;
  }
  .app-product-list .select-car{
    background: -webkit-linear-gradient(left, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #03adf3 , #0080e5); /* 标准的语法 */
    display: block;
    min-height: inherit;
    color: #fff;
  }
  .app-product-list .select-car .mint-cell-wrapper{
    padding:14px 16px;
    background: none;
  }
  .app-product-list .search-content .mint-cell-wrapper{
    padding:2px 10px;
  }
  .app-product-list .search-content .mint-cell{
    border: 1px solid #ddd;
    border-radius:20px;
    padding:0 6px;
    min-height: inherit;
  }
  .app-product-list .search-content .mint-cell .mint-field-core{
    height: 30px;
    font-size: 14px;
  }
  .app-product-list .search-content  .icon-search{
    padding-left: 12px;
    font-size: 20px;

  }
  .app-product-list{
    background: #fff;
  }

  .app-product-list .media-list{
    padding:0 0 24px;
  }
  .app-product-list .media-item{
    display: flex;
  }
  .app-product-list .media-img{
    width: 32%;
  }
  .app-product-list .media-content{
    position: relative;
    padding:10px 10px 10px 0;
    width: 68%;
    margin: 0;
    min-height: 120px;
    border-bottom:1px solid #eee;
  }
  .app-product-list .media-content dd{
      margin: 0;
    display: flex;
    }
  .app-product-list .media-content .addon{
    width:72px;
  }
  .app-product-list .media-content .content{
    width:80%;
  }
  .app-product-list .media-content .media-title{
    font-size: 15px;
    color: #000;
    height: 44px;
    margin:0 0 6px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
  }
  .app-product-list .media-content .media-number{
    font-size: 13px;
    color: #999;
  }
  .app-product-list .media-content .media-price{
    position: absolute;
    left: 0;
    bottom:8px;
    font-size: 14px;
    color: red;
    line-height: 20px;
  }
  .app-product-list .media-content .item-factory{
    border: 1px solid red;
    margin-left: 6px;
    padding:0 4px;
    border-radius: 3px;
    font-size: 12px;
  }
  .app-product-list .classification-footer-content{
    background: #fff;
    position: fixed;
    left: 0;
    right:0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);
    overflow: auto;
  }
  .app-product-list .classification-footer-content .item{
    width: 20% !important;;
    min-width: 20% !important;
    max-width: 20% !important;
    padding:16px 0;
    font-size: 15px;
    text-align: center;
    border-bottom:1px solid #fff;
  }
  .app-product-list .classification-footer-content.item3 .item{
    width: 50% !important;;
    min-width: 50% !important;
    max-width: 50% !important;
  }
  .app-product-list .classification-footer-content.item3 .item{
    width: 33.2% !important;;
    min-width: 33.2% !important;
    max-width: 33.2% !important;
  }
  .app-product-list .classification-footer-content.item4 .item{
    width: 25% !important;;
    min-width: 25% !important;
    max-width: 25% !important;
  }
  .app-product-list .classification-footer-content.item5 .item{
    width: 20% !important;;
    min-width: 20% !important;
    max-width: 20% !important;
  }

  .app-product-list .classification-footer-content .item.active{
    color: #26a2ff;
    border-bottom:1px solid #26a2ff;
  }
  .app-product-list .product-none{
    padding:20px 0 0;
    font-size: 17px;
    color: #999;
    text-align: center;
  }
  .app-product-list .button-xunjia{
    padding:16px 0 0;
  }
  .app-product-list .button-xunjia .mint-button{
    font-size: 15px;
  }
</style>

